<template>
	<div id="myOrder">
		<van-tabs v-model="active" @click="onTable" sticky animated swipeable :color="'#07c160'">
			<van-tab title="处理中"></van-tab>
			<van-tab title="已撤案"></van-tab>
		</van-tabs>

		<van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
			<van-list
				v-model="loading"
				:finished="finished"
				finished-text="没有更多数据"
				:immediate-check="false"
				:type="'number'"
				@load="onLoad"
				>
				<template slot="default">
					<!-- order展示模块 -->
					<orderShowTemplate 
						v-for="(data) in tableData"
						:key="data.id" 
						:dataList="data"
						:describe="true"
						:type="'number'"
						:fieldList="fieldList(data)"
						@onTitle="$router.push(`/user/details/${data.id}`)">
					</orderShowTemplate>
				</template>
			</van-list>  
		</van-pull-refresh>

		<!-- <van-swipe-cell id="orderTable" v-for="(item,index) in tableData.slice(tableStart,tableEnd)" :key="item.id">
			<van-cell :title="item.order_number" value="左滑选择" @click="$router.push({
			path:'/user/details/'+tableData[index].id
		})" />
			<template slot="right">
				<van-button square type="info" text="申请开票" @click="$router.push({
			name:'user-invoice',
			params:{
				invoiceArr:invoiceArr,
				order_number:tableData[index].order_number,
				details:tableData[index]
			}
		})"
		:disabled="(tableData[index].invoice_record && tableData[index].invoice_record.status=='等待开票')"
		 v-if="!(tableData[index].invoice_record && tableData[index].invoice_record.invoice_number)"></van-button>
				<van-button 
				 v-if="(tableData[index].invoice_record && tableData[index].invoice_record.invoice_number)"
				:disabled="(tableData[index].invoice_record && tableData[index].invoice_record.refund=='等待退款')"
				 square type="warning" text="申请退款"
				 @click="$router.push({
			name:'user-refund',
			params:{
				id:tableData[index].invoice_record.id
			}
		})" />
			</template>
		</van-swipe-cell>
		<div v-if="isLoading">
			<center>
				<br/><br/><van-loading size="24px">加载中...</van-loading><br/><br/>
			</center>
		</div> -->
	</div>
</template>

<script>
	import {isBottom} from '~/util/index.js'
	import orderShowTemplate from '~/components/_orderShowTmp'
	export default {
		data() {
			return {
				active: 0,
				tableData: [],
				stepsText: ['提交成功', '代理人已接单', '审核文件通过', '完成文件上传', '订单结束'],
				// invoiceArr: [],
				tableStart: 0,
				tableEnd: 15,
				loading: false,
				pullLoading:false,
				page : 1,
				finished: false,
				params: {
					page: 1,
					status: `代理人撰写中,案件内审中,案件修改中,发明人确认定稿中,定稿文件上传中`
				},
			}
		},
		created() {
			this.getOrderList()
			// let that = this;
			// //我的订单列表
			// that.$axios.get('/api/consumer/order', { params: {
			// 	page: that.page
			// } }).then(res => {
			// 	that.tableData = res.data.data;
			// })
			// .then(res => {
			// 	//我的发票信息列表
			// 	return that.$axios.get('/api/inv')
			// })
			// .then(res => {
			// 	if (res.data.code == 200) {
			// 		that.invoiceArr = res.data.data;
			// 	}
			// })
		},
		// mounted(){
		// 	let that = this;
		// 	//无限滚动加载
		// 	isBottom(function(){
		// 		if(document.getElementById('myOrder')){
		// 			//仿加载（其实已经有所有数据）
		// 			that.isLoading=true;
		// 			that.$nextTick(async function(){
		// 				//滚动到最底部，显示出“加载中...”的字样
		// 				window.scrollTo(0, document.documentElement.scrollHeight);
		// 				//async配合 await，避免一直触发isBottom函数
		// 				await setTimeout(function() {
		// 					//主要逻辑！！！
		// 					that.$axios.get(`/api/consumer/order?page=${that.page + 1}`)
		// 					.then(res => {
		// 						if(res.data.code==200){
		// 							if(res.data.data.length>0){
		// 								that.page += 1;
		// 								that.tableData.push(...res.data.data);
		// 							}else{
		// 								that.$toast('没有更多了');
		// 							}
		// 						}
		// 					})
		// 					that.isLoading=false;
		// 					//往上滑动10px，避免一直触发isBottom函数
		// 					window.scrollTo(0, document.documentElement.scrollHeight-document.body.offsetHeight-10);
		// 				}, 500);
		// 			})
		// 		}
		// 	})
		// },
		methods: {
			getOrderList() {
				this.page = 1
				this.params.page = 1
				this.tableData = []
				this.$axios.get('/api/consumer/order', { params: this.params }).then(res => {
					if(res.status === 200) {
						if(res.data.page.total <= 15) {
							this.finished = true
						}else{
							this.finished = false
						}
						this.tableData = res.data.data
						this.isLoading = false
						this.pullLoading = false
					}else{
						that.$toast('请求错误');
					}
				})
			},
			refund(refundID) {
				this.$axios.put('/api/consumer/refund/' + this.refundID)
					.then(res => {
						if (res.data.code == 200) {
							this.$toast({
								message: '申请退款成功，请等待处理结果！',
								type: 'success'
							});
						} else {
							this.$toast({
								message: res.data.message,
								type: 'fail'
							});
						}
					})
			},
			onLoad() {
            	setTimeout(() => {
					this.params.page++
					this.$axios.get('/api/consumer/order', { params: this.params }).then(res => {
						if(res.data.data.length > 0) {
							this.page++
							this.tableData.push(...res.data.data)
							this.loading = false
						}else{
							this.loading = false
							this.finished = true
						}
					})
				}, 500);
			},
			onRefresh() {
				setTimeout(() => {
					this.getOrderList()
				}, 500)
			},
			onTable(index, title) {
				if(index === 0 && title === '处理中') {
					this.params = {
						page: 1,
						status: `未接单,代理人撰写中,案件内审中,案件修改中,发明人确认定稿中,定稿文件上传中,等待提交国知局`
					}
				}else{
					this.params = {
						page: 1,
						status: '已撤案'
					}
				}

				this.getOrderList()
			},
			fieldList(data) {
				if(data && data.agent && data.process) {
					return [{message: `代理人：${data.agent.name} 专属顾问：${data.process.email_work.split('@')[0].slice(-3)}`}, {message: `专利名称：${data.type} `}]
				}else{
					if(data && data.agent) {
						return [{message: `代理人：${data.agent.name} 专属顾问：暂无`}, {message: `专属顾问：暂无`}]
					}else{
						return [{message: `代理人：暂无 专属顾问：${data.process.email_work.split('@')[0].slice(-3)}`}, {message: `专属顾问：暂无`}]
					}
				}
			}
		},
		components: {
			orderShowTemplate
		}
	}
</script>

<style lang="less">
	#myOrder {
		#orderTable {
			margin-bottom: 10px;
			.van-cell__title {
				span {
					display: inline-block;
					/*将span当做块级元素对待*/
					width: 550px;
					white-space: nowrap;
					overflow: hidden;
				}
			}

			.van-button {
				height: 100%;
			}
		}
	}
</style>
